<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:200px;height:100px;}

        .red{color: red;}

        .green{background-color: green;}

        .border{border:solid 10px black;}
    </style>
</head>
<body>
    <div class="app">
        <h2>hello {{ msg }}</h2>
        <p v-text="msg"></p>
        <p v-bind:title="msg">这是一个段落</p>
        <p :title="msg">这是一个段落</p>
        <p v-bind:class="[a, c, d]">这是一个段落</p>
        <p v-bind:class="obj">这是一个段落</p>
        <p :class="[a, b, c, d]">这是一个段落</p>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>

    const {createApp} = Vue;

    createApp({
        data(){
            return {
                msg:"Vue",
                a: "box",
                b: "red",
                c: "green",
                d: "border",
                flag:true,
                obj:{box:true, red:true, green:false, border:true}
            }
        }
    }).mount(".app");
    
</script>
</html>